<template>
	<view class="detail">
		<!-- #ifdef APP-PLUS -->
		<view style="margin-top: 30px;"></view>
		<!-- #endif -->
		
		<view class="top">
			<image :src="movie.cover_url"></image>
			<view class="tit">
				<view>
					<text>{{ movie.title }}</text><br>
					<text>{{ movie.en_title }}</text><br>
					<text class="s">{{ movie.tag }}</text>
				</view>
				<view class="tit-score">
					<uni-rate :readonly="true" :value="movie.grade*0.5" size="20px"/>
					<view :class="movie.grade==0?'':'c'" 
						:style="movie.grade==0?'font-weight: normal;font-size: 15px;':''">
						{{ movie.grade==0?'暂无评分': movie.grade }}
					</view>
				</view>
				<view class="bot">
					<view class="collect">
						<uni-icons :type="flag?'star-filled':'star'" size="25px" color="#ffca3e" @click="collect(movie.id)"></uni-icons>
						<view><text v-show="flag">已</text>收藏</view>
					</view>
					<view class="collect" @click="goAppraise(movie.id)">
						<uni-icons type="hand-up" size="25px" color="#ffca3e"></uni-icons>
						<view>评价</view>
					</view>
				</view>
			</view>
			<view class="b">简介</view>
			<view class="intro">
				<rich-text :nodes="movie.intro"></rich-text>
			</view>
		</view>
		
		<view class="stuff">
			<view class="stuff-top">
				<view class="b">演职员</view>
				<!-- <view>
					全部<uni-icons type="right"></uni-icons>
				</view> -->
			</view>
			<scroll-view class="scroll-list" scroll-x="true" >
				<view class="scroll-item" v-for="(item,index) in stuff" :key="index">
					<view class="pics">
						<image :src="item.img_url" mode="aspectFill"></image>
					</view>
					<view class="text" :title="item.name">{{ item.name }}</view>
					<view class="s-third">
						<view :title="item.post" class="text">{{ item.post }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="pics">
			<view class="b">剧照</view>
			<scroll-view class="scroll-list" scroll-x >
				<view class="scroll-item" v-for="(item,index) in pics" :key="index">
					<view class="sroll-item-pics">
						<image :src="item.img_url" mode="aspectFill" @click="previewImg(index)"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="review">
			<view class="b">影评</view>
			<review-item :review="review" :rev_like="rev_like"></review-item>
		</view>
		
		<view class="bottom">已加载全部评论</view>
	</view>
</template>

<script>
	import scrollListItem from '../../components/scroll-list-item/scroll-list-item.vue';
	import reviewItem from '../../components/review-item/review-item.vue';
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				id: 0,
				flag: 0,
				reFresh: '',
				rev_like: [],
				stuff: [],
				movie: [],
				pics: [],
				review: []
			}
		},
		computed: mapState(['isLogin','userInfo']),
		components: {
			'scroll-list-item': scrollListItem,
			'review-item': reviewItem
		},
		onLoad(options) {
			this.id = options.data
			// console.log(this.id)
			this.getMovie(this.id)
			this.getCollectStatus(this.id)
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
				this.getMovie(this.id)
			},1000)
		},
		watch: {
			reFresh: function() {
				this.getMovie(this.id)
				this.getCollectStatus(this.id)
			}
		},
		methods: {
			getMovie(id) {
				uni.request({
					url: 'http://www.yingke.com/Index/movieInfo?id='+id,
					method: 'POST',
					success: (res) => {
							this.movie = res.data.data
							this.pics = res.data.data.pics
							this.stuff = res.data.data.cast
							this.review = res.data.data.review
					}
				})
			},
			getCollectStatus(id) {
				if(!this.isLogin)
					uni.request({
						url: 'http://www.yingke.com/Index/isCollectStatus?uid='+this.userInfo.id+'&movie_id='+this.id,
						method: 'POST',
						success: (res) => {
							this.flag = res.data.data.collect
						}
					})
			},
			collect(id) {
				if(!this.isLogin)
					uni.request({
						url: 'http://www.yingke.com/Index/isCollect?uid='+this.userInfo.id+'&movie_id='+this.id,
						method: 'POST',
						success: () => {
							this.getCollectStatus(this.id)
						}
					})
				else{
					uni.showToast({
						title: '当前未登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '../login/login'
						})
					},1000)
				}
			},
			goAppraise(id) {
				if(!this.isLogin)
					uni.navigateTo({
						url: '../appraise/appraise?uid='+this.userInfo.id+'&movie_id='+id
					})
				else{
					uni.showToast({
						title: '当前未登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '../login/login'
						})
					},1000)
				}
			}
		}
	}
</script>

<style lang="scss">
	.detail{
		.c{
			// #ifdef APP-PLUS
			margin-top: -6px;
			// #endif
			font-size: 20px;
			color: #ffca3e;
		}
		.top{
			margin-top: 10px;
			margin-left: 10px;
			padding-bottom: 10px;
			border-bottom: solid 1px #eaeaea;
			image{
				width: 95px;
				height: 140px;
				border-radius: 10px;
				box-shadow: 5px 5px 10px #bababa;
			}
			.tit{
				width: 250px;
				margin-left: 10px;
				margin-top: 5px;
				margin-bottom: 10px;
				font-size: 22px;
				font-weight: bold;
				display: inline-block;
				text:nth-child(3){
					font-size: 15px;
				}
				.tit-score{
					display: flex;
				}
				.s{
					color: #C0C0C0;
					font-weight: normal;
					font-size: 13px;
				}
				.bot{
					display: flex;
					.collect{
						width: 120px;
						margin-left: 10px;
						text-align: center;
						border: 1px solid #eaeaea;
						border-radius: 5px;
						box-shadow: 5px 3px 10px #f3f3f3;
						font-size: 18px;
					}
				}
			}
		}
		.intro{
			margin: 10px 5px;
		}
		.stuff{
			.stuff-top{
				display: flex;
				margin-top: 10px;
				view{
					margin-left: 10px;
				}
			}
			.scroll-list{
				width: 100%;
				margin-top: 20px;
				overflow: hidden;
				white-space: nowrap;
				.scroll-item{
					display: inline-block;
					margin-left: 10px;
					.pics{
						width: 95px;
						height: 140px;
						object-fit: hidden;
						image{
							width: 100%;
							height: 100%;
							border-radius: 10px;
							object-fit: cover;
						}
					}
					.s-third{
						display: flex;
						.third{
							font-size: 15px;
							color: #ffca3e;
						}
						
					}
					.text{
						width: 95px;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				// overflow-x: hidden;
			}
		}
		
		.pics{
			margin-top: 10px;
			.b{
				margin-left: 10px;
			}
			.scroll-list{
				width: 100%;
				margin-top: 20px;
				white-space: nowrap;
				.scroll-item{
					display: inline-block;
					margin-right: 5px;
					.sroll-item-pics{
						width: 250px;
						height: 150px;
						overflow: hidden;
						image{
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
				}
			}
		}
		
		.review{
			margin-top: 10px;
			margin-left: 10px;
			.re-tit{
				font-size: 20px;
				font-weight: bold;
			}
		}
		.bottom{
			height: 50px;
			margin-top: 20px;
			text-align: center;
		}
	}
</style>
